<template>
  <div style="width: 100%; height: 100%">
    <a-input-search
      v-model:value="searchValue"
      style="width: 100%; margin-bottom: 8px; padding: 10px 10px 0"
      placeholder="搜索"
      @search="searchTree"
    />
    <div style="width: 100%; height: calc(100% - 42px); overflow: auto">
      <div>
        <a-tree
          v-model:expandedKeys="expandedKeys"
          v-model:selectedKeys="selectedKeys"
          :load-data="onLoadData"
          :tree-data="treeData"
          :field-names="{ key: 'id', title: 'name' }"
          @select="select"
        >
          <template #title="{ name }">
            <span v-if="name.includes(searchValue) && searchValue" style="color: #1890ff">{{ name }}</span>
            <span v-else>{{ name }}</span>
          </template>
        </a-tree>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref, toRaw, onMounted } from 'vue'
import factory from '../factory'

export default defineComponent({
  props: { iAmCom: { type: Boolean } },
  emits: ['treeNodeSelected'],
  setup(props, ctx) {
    const expandedKeys = ref([])
    const selectedKeys = ref([])
    const treeData = ref([{ name: '功能池', id: '-1', children: [] }])
    const getFirstTree = (search = '') => {
      factory.searchTree(search).then((res) => {
        res.data.forEach((m) => {
          m.title = m.name
          m.key = m.id
        })
        treeData.value[0].children = res.data
        expandedKeys.value = ['-1']
        if (search) {
          openAll(treeData.value)
        }
        selectedKeys.value = ['-1']
      })
    }
    getFirstTree()

    //展开所有带叶子的节点
    const openAll = (node) => {
      node.forEach((m) => {
        if (m.children) {
          expandedKeys.value.push(m.key)
          openAll(m.children)
        }
      })
    }

    //==选中节点======================
    let currentNode = treeData.value[0]
    const select = (selectedKeys, e) => {
      currentNode = e.node
      !currentNode.dataRef && (currentNode.dataRef = toRaw(currentNode))
      ctx.emit('treeNodeSelected', e.node)
    }
    //==加载节点==========================
    const onLoadData = (treeNode) => {
      return new Promise((resolve, reject) => {
        if (treeNode.children) {
          resolve()
          return
        }
        let pid = treeNode.id
        factory.getTree(pid).then((res) => {
          res.data.forEach((m) => {
            m.title = m.name
            m.key = m.id
          })
          treeNode.dataRef.children = res.data
          treeData.value = [...treeData.value]
          resolve()
        })
      })
    }
    //==父组件ref调用===========
    const reNewNode = (node) => {
      delete currentNode.children
      if (currentNode.key === '-1') {
        getFirstTree()
      } else {
        onLoadData(currentNode)
      }
    }
    //==搜索树=====
    const searchValue = ref('')
    const searchTree = () => {
      getFirstTree(searchValue.value)
    }

    return {
      expandedKeys,
      selectedKeys,
      treeData,
      onLoadData,
      select,
      reNewNode,
      searchValue,
      searchTree,
    }
  },
})
</script>
